<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>行情搜索</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui-hangqing.css"/>
    <style type="text/css">
        header {
            color: #FFFFFF;
            background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #0F9BEB, #1569C8);
            /* 标准的语法*/
        }

        .aui-bar {
            min-height: 32px;
            line-height: 32px;
        }

        .aui-bar .aui-title {
            margin: 30px auto;
        }

        .aui-searchbar {
            margin: 0 !important;
            background: initial;
            height: 2.45rem;
            line-height: 2.45rem;
            padding-left: 0 !important;
            padding-right: 0rem !important;
        }

        .aui-searchbar-input {
            height: 1.45rem;
            margin: 0 0.75rem 0 0.75rem !important;
            padding-left: 0.4rem !important;
        }

        .aui-searchbar .aui-searchbar-btn {
            border: 0.05rem solid #ffffff;
            text-align: center;
            border-radius: 0.15rem;
            /*margin-right: 0.75rem;*/
            padding: 0;
        }

        .aui-searchbar-btn {
        }

        /*.aui-text-info {
            color: #FFFFFF !important;
        }*/

        .aui-bar-nav {
            top: 0;
            padding-bottom: 6px;
        }

        .aui-searchbar .aui-searchbar-btn {
            border: 0.05rem solid #ffffff;
            color: #FFFFFF;
            width: 2.75rem;
            height: 1.45rem;
            line-height: 1.45rem;
        }

        .aui-searchbar-clear-btn {
            position: absolute;
            right: 0 !important;
            background-color: initial;
        }

        /*强制icon样式*/

        .back-icon {
            width: 20px;
            height: 32px;
            background-image: url(../../image/btn/nav_back@2x.png);
            background-size: 20px;
            margin: 30px 0 2px 0px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .search-icon {
            display: -webkit-box;
            width: 0.8rem;
            height: 0.8rem;
            background-image: url(../../image/btn/search_input_ss@2x.png);
            background-size: 0.8rem;
            margin: 0.3rem 0 0.05rem 0px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .clear-icon {
            display: -webkit-box;
            width: 0.8rem;
            height: 0.8rem;
            background-image: url(../../image/btn/search_input_sc@2x.png);
            background-size: 0.8rem;
            margin: 0.15rem 0 0.05rem 0px;
            background-position: center;
            background-repeat: no-repeat;
        }

        /*清除icon原有格式*/

        .aui-icon-search:before {
            content: initial;
        }

        .aui-icon-roundclosefill:before {
            content: initial;
        }

        /*列表强制样式*/

        .aui-content.search-list {
            background-color: #FFFFFF;
        }

        .aui-info.aui-margin-t-10.aui-padded-l-10.aui-padded-r-10 {
            border-bottom: 1px solid #e6e6e6;
        }

        .aui-info-item.mc-item {
            color: #000000;
            font-size: 0.7rem;
            width: 35%;
        }

        .aui-info-item.jys-item {
            width: 40%;
            font-size: 0.6rem;
        }

        .aui-info-item.sc-item {
            width: 10%;
            z-index: 1001
        }

        .aui-searchbar-input input {
            font-size: 0.6rem;
            width: 90%;
        }

        .aui-info-item.sc-item img {
            width: 1rem;
        }

        /*搜索失败提示*/
        /*注意:相对于不定高度的body绝对定位,不可给父集相对定位设置*/

        .aui-content.infor-big-content {
            /*position: relative;*/
        }

        .infor-content {
            width: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .infor-img-content {
            width: 100%;
            text-align: center;
        }

        .infor-img {
            display: inline-flex;
            height: 70px;
        }

        .infor-txt-content {
            width: 100%;
            display: inline-block;
            font-size: 0.6rem;
            color: #000000;
            padding: 0 !important;
        }

        .aui-content-padded {
            padding: 0.75rem;
            background-color: #ffffff;
            margin-top: 0.75rem;
        }

        .aui-padded-r-10 {
            padding-right: 0.75rem !important;
        }

        .aui-padded-l-10 {
            padding-left: 0.75rem !important;
        }
        .loading-off,.loading-on{
            position: absolute;
            margin:auto;
            display: none;
            width: 100%;
            height: 100%;
        }
        .loading-off{
            display: block;
        }
        .loading-img{
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>

<body>
<div class="loading-on" id="loading">
    <img src="../../image/loading_more.gif" alt="" class="loading-img">
</div>
<header class="aui-bar aui-bar-nav aui-bar-info">
    <a href="../../index.html" class="aui-pull-left">
        <span class="back-icon"></span>
    </a>
    <div class="aui-title">行情搜索</div>
    <!--搜索框-->
    <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius">
            <span class="aui-iconfont aui-icon-search search-icon"></span>
            <input type="search" placeholder="请输入搜索内容" id="search-input" autofocus="autofocus">
            <div class="aui-searchbar-clear-btn">
                <span class="clear-icon"></span>
            </div>
        </div>
        <div class="aui-searchbar-btn" style="margin-right: 15px;" tapmode>取消</div>
    </div>

</header>
<!--搜索行情列表-->
<section class="aui-content search-list" id="searchLis">
</section>

<!--搜索失败显示-->
<section class="infor-big-content">
</section>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/tool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  var headers = {
    "appVersion": "1.0.0",
    "os": "ios",
    "osVersion": "10.0.0"
  }
  //	点击搜索第二功能
//  apiready = function () {
//    api.parseTapmode();
//    headers = {
//      "appVersion": "1.0.0",
//      "os": api.systemType,
//      "osVersion": api.systemVersion
//    }
//  }
  var searchBar = document.querySelector(".aui-searchbar");
  var searchBarInput = document.querySelector(".aui-searchbar input");
  var searchBarBtn = document.querySelector(".aui-searchbar .aui-searchbar-btn");
  var searchBarClearBtn = document.querySelector(".aui-searchbar .aui-searchbar-clear-btn");
  if (searchBar) {
    searchBarInput.onclick = function () {
      searchBarBtn.style.marginRight = "0.75rem";
    }
    searchBarInput.oninput = function () {
      if (this.value.length) {
        searchBarClearBtn.style.display = 'block';
        //              cation: aui-text-info属性对该处功能有影响
        //              searchBarBtn.classList.add("aui-text-info");
        searchBarBtn.textContent = "搜索";
      } else {
        searchBarClearBtn.style.display = 'none';
        //              searchBarBtn.classList.remove("aui-text-info");
        searchBarBtn.textContent = "取消";
      }
    }
  }
  searchBarClearBtn.onclick = function () {
    this.style.display = 'none';
    searchBarInput.value = '';
    searchBarBtn.classList.remove("aui-text-info");
    searchBarBtn.textContent = "取消";
    $('#searchLis').empty();
  }

  searchBarBtn.onclick = function () {

    var keywords = searchBarInput.value;
    if (keywords.length) {
      searchBarInput.blur();
      //document.getElementById("searchLis").textContent = keywords;
      ajax_fordata(keywords);
      // colected();
    } else {

      this.style.marginRight = "-" + this.offsetWidth + "px";
      searchBarInput.value = "";
      searchBarInput.blur();

    }
  }
  var resultlist = [];

  function ajax_fordata(k) {

    var si = setInterval(function () {
      if (headers != {}) {
        clearInterval(si)
        $('#searchLis').html('')
        $('#loading').attr('class','loading-off');
        $.ajax({
          url: orginlink + '/coin/searchCoin?nickName=' + k,
          type: 'GET',
          timeout : 1000,
          headers: headers,
          contentType: "application/json",
          dataType: 'json',
          success: function (result) {
            $('#loading').attr('class','loading-on');
            resultlist = result.result;
            addSearch(result, k);
            console.log(JSON.stringify(result))
            localStorage.setItem("dataList", JSON.stringify(result.result))
          },
          error(){
            $('#loading').attr('class','loading-on');
          }
        });
      }
    }, 100)
  }

  //行情搜索
  var mindex = 0;

  function addSearch(result, k) {

    $.each(result.result, function (index, obj) {
      var jysName = obj['exchangeId'];
      var nickName = obj['nickName'];
      var x = getjysName(jysName);

      var is = 1;

      var likeList = JSON.parse(localStorage.getItem("likeLists"))

      if (!likeList)
        likeList = []

      for (let i of likeList) {
        if (i.nickName == resultlist[index].nickName && i.exchangeId == resultlist[index].exchangeId) {
          is = 0
        }
      }

      $('#searchLis').append(
        '<li class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">' +
        '<div class="aui-info-item mc-item">' +
        '<span>名称</span><span class="aui-margin-l-5" >' + nickName + '</span></div>' +
        '<div class="aui-info-item jys-item" >交易所：' + x + '</div>' +
        '<div class="aui-info-item sc-item"><img src="../../image/btn/' + (is ? 'search_sz_0@2x.png' : 'search_sz_1@2x.png') + '" class="sc-img" onclick="additem(' + index + ')"/></div></li>');
    })
  }

  function additem(index) {
    var nickName = (resultlist[index])["nickName"];
    var jysName = (resultlist[index])["exchangeId"];
    var clk = 1;
    var srcArr = ["../../image/btn/search_sz_0@2x.png", "../../image/btn/search_sz_1@2x.png"]
    var likeList = JSON.parse(localStorage.getItem("likeLists"))

    if (!likeList)
      likeList = []
    for (let i of likeList) {
      if (i.nickName == nickName && i.exchangeId == jysName) {
        clk = 0
        break;
      }
    }

    if (clk == 1) {
      likeList.push({
        nickName: nickName,
        exchangeId: jysName
      })
    } else {
      for (let i = 0; i < likeList.length; i++) {
        if (likeList[i].nickName == nickName && likeList[i].exchangeId == jysName) {
          likeList.splice(i, 1)
        }
      }
    }

    $(".sc-img:eq(" + index + ")").attr("src", srcArr[clk]);
    localStorage.setItem("likeLists", JSON.stringify(likeList));
  }
</script>

</html>
